import React from 'react'
import { Card,Button,Modal,Tabs, message } from 'antd'
import { getUserApi,UpdateUserAvatarApi } from '../../apis/user'
import('./profile.less')
import { eventBus } from '../../utils/event'
import ProfileDrawer from './ProfileDrawer'
export default function Profile() {
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    //存储登录的用户信息
    const [loginUser, setLoginUser] = React.useState({} as any)
    //编辑用户抽屉开关
    const[open,setOpen]=React.useState(false)
    //获取本地存储中的userInfo
    const { username } = JSON.parse(localStorage.userInfo || '')
    //头像
    const baseImgUrl = 'http://xawn.f3322.net:8002/distremote/static/avatar/'
    //处理性别
    function setSex(param:string){
        switch (param) {
            case '0':
                return "男"
                case '1':
                return "女"
                case '2':
                    return "保密"
        }
    }
    //获取当前登录的用户个人信息
    function getLoginUser() {
        getUserApi({ username }).then(res => {
           
            setLoginUser(res.rows[0])
        })
    }
    React.useEffect(() => {
        getLoginUser()
    }, [])
  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const changeImg = () => {
        setIsModalOpen(true);
  }
  const onChange = (key: string) => {
    console.log(key);
  };
    const getPhoto = (e: any) => {
        //拿到头像src
        let imgSrc = e.target.getAttribute('src')
        //判断 "/"分隔符最后出现的位置
        const num = imgSrc.lastIndexOf('/')
        //slice()分隔，拿到图片名称
        imgSrc = imgSrc.slice(num + 1)
        UpdateUserAvatarApi({username,avatar:imgSrc}).then(res => {
            message.success('修改成功')
            getLoginUser()
            let userInfo = JSON.parse(localStorage.userInfo)
            userInfo.avatar = imgSrc
            localStorage.userInfo = JSON.stringify(userInfo)
            //通知dropDown组件更新头像
            eventBus.emit("updateProfile")
            setIsModalOpen(false)
        })
    }
  function updateUser() {
    setOpen(true)
  }
  return (
      <>
      <Card title="个人资料" extra={<a  onClick={updateUser}>编辑资料</a>} style={{ width: '100%'}}>
       <div className='userContainer'>
                  <div className="left">
                      <img src={baseImgUrl + loginUser.avatar} alt="" style={{ width: '160px', height: '160px',display:'flex' }} />
                      <Button className='buttons' onClick={changeImg}>修改头像</Button>
                  </div>  
                  <div className="right">
                      <p>账户:<span>{loginUser.username }</span></p>
                      <p>角色:<span>{loginUser.roleName }</span></p>
                      <p>性别:<span>{setSex(loginUser.ssex)}</span></p>
                      <p>邮箱:<span>{loginUser.email}</span></p>
                      <p>手机号:<span>{loginUser.mobile}</span></p>
                      <p>部门:<span>{loginUser.deptName}</span></p>
                      <p>描述:<span>{loginUser.description}</span></p>
                  </div>  
       </div>
          </Card>
          <Modal title="修改头像" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
          footer={false}
          >
         <Tabs
            defaultActiveKey="1"
            // onChange={onChange}
            items={[
              {
                label: `后花园子`,
                key: '1',
                children: <><img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/default.jpg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/1d22f3e41d284f50b2c8fc32e0788698.jpeg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/2dd7a2d09fa94bf8b5c52e5318868b4df.jpg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/8f5b60ef00714a399ee544d331231820.jpeg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/17e420c250804efe904a09a33796d5a16.jpg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/87d8194bc9834e9f8f0228e9e530beb1.jpeg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/496b3ace787342f7954b7045b8b06804.jpeg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/595ba7b05f2e485eb50565a50cb6cc3c.jpeg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/964e40b005724165b8cf772355796c8c.jpeg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/5997fedcc7bd4cffbd350b40d1b5b987.jpg" alt="" />
                  <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/5997fedcc7bd4cffbd350b40d1b5b9824.jpg" alt="" />
                  </>,
              },
              {
                label: `阿里系`,
                key: '2',
                children: <>
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/cnrhVkzwxjPwAaCfPbdc.png" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/BiazfanxmamNRoxxVxka.png" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/gaOngJwsRYRaVAuXXcmB.png" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/WhxKECPNujWoWEFNdnJE.png" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/ubnKSIfAJTxIgXOKlciN.png" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/jZUIxmJycoymBprLOUbT.png" alt="" />
                </>,
              },
              {
                label: `脸萌`,
                key: '3',
                children: <>
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/19034103295190235.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165920.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414170003.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165927.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165754.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165815.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165821.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165942.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165947.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165827.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165955.jpg" alt="" />
                <img onClick={getPhoto} className='updateTx' src="http://xawn.f3322.net:8002/distremote/static/avatar/20180414165834.jpg" alt="" />
                </>,
              },
            ]}
          />
      </Modal>
      <ProfileDrawer open={open} setOpen={setOpen} loginUser={loginUser} getLoginUser={getLoginUser } />
      </>
  )
}
